<template>
  <div class="left">
    <div class="box">
      <left-panel></left-panel>
      <toolbar-left></toolbar-left>
      <quick-map
        v-show="quickPanel === 'underMap'"
        :class="activeMenu ? '' : 'close-left'"
      ></quick-map>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import QuickMap from "@/views/left/quickmap/index.vue";

import ToolbarLeft from "./toolbar/index.vue";
import LeftPanel from "./leftpanel/index.vue";

@Component({
  name: "LeftIndex",
  components: {
    ToolbarLeft,
    QuickMap,
    LeftPanel,
  },
})
export default class Left extends Vue {
  get activeMenu() {
    return true;
  }
  get showLegend() {
    return true;
  }
  get quickPanel() {
    return true;
  }
  get viewMode() {
    return true;
  }
  get isSubsystem() {
    return true;
  }
}
</script>

<style scoped lang="scss">
.left {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  .box {
    position: absolute;
    top: 80px;
    left: 0;
    display: flex;
    align-items: flex-end;
    height: calc(100% - 124px);
    .show-tree {
      margin-left: 0;
    }
    .hide-tree {
      margin-left: -416px;
    }
  }
  .subsystem-left {
    left: 20px;
  }
  .close-left {
    left: 60px;
  }
}
</style>
